import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import Header from '../../components/Header/Header';
import Banner from '../../components/Banner/Banner';
import KnowledgeSection from '../../components/KnowledgeSection/KnowledgeSection';
import ConsultationSection from '../../components/ConsultationSection/ConsultationSection';
import VirtualList from '../../components/VirtualList/VirtualList';
import './HomePage.scss';

interface ListItem {
  id: number;
  title: string;
  description: string;
  image?: string;
  tag?: string;
  date?: string;
  views?: number;
}

const HomePage: React.FC = () => {
  const navigate = useNavigate();
  const [listData, setListData] = useState<ListItem[]>([]);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const [page, setPage] = useState(1);

  // 模拟数据生成
  const generateMockData = (pageNum: number): ListItem[] => {
    const items: ListItem[] = [];
    const startId = (pageNum - 1) * 10 + 1;
    
    for (let i = 0; i < 10; i++) {
      const id = startId + i;
      items.push({
        id,
        title: `医疗健康文章 ${id} - ${getRandomTitle()}`,
        description: getRandomDescription(),
        image: `/api/placeholder/200/150?text=Article${id}`,
        tag: getRandomTag(),
        date: getRandomDate(),
        views: Math.floor(Math.random() * 10000) + 1000
      });
    }
    
    return items;
  };

  const getRandomTitle = () => {
    const titles = [
      '感冒预防指南',
      '高血压管理方法',
      '糖尿病饮食建议',
      '心理健康维护',
      '运动康复指导',
      '营养搭配原则',
      '睡眠质量改善',
      '慢性病预防'
    ];
    return titles[Math.floor(Math.random() * titles.length)];
  };

  const getRandomDescription = () => {
    const descriptions = [
      '了解疾病的预防方法，掌握健康管理技巧，提升生活质量。',
      '专业的医疗知识分享，帮助您更好地管理健康状况。',
      '科学的健康建议，让您远离疾病困扰，享受健康生活。',
      '实用的健康小贴士，为您的健康保驾护航。',
      '权威的医疗资讯，助您做出正确的健康决策。'
    ];
    return descriptions[Math.floor(Math.random() * descriptions.length)];
  };

  const getRandomTag = () => {
    const tags = ['疾病预防', '健康管理', '营养健康', '心理健康', '运动康复'];
    return tags[Math.floor(Math.random() * tags.length)];
  };

  const getRandomDate = () => {
    const dates = ['2024-01-15', '2024-01-14', '2024-01-13', '2024-01-12', '2024-01-11'];
    return dates[Math.floor(Math.random() * dates.length)];
  };

  // 初始加载数据
  useEffect(() => {
    loadInitialData();
  }, []);

  const loadInitialData = () => {
    setLoading(true);
    setTimeout(() => {
      const initialData = generateMockData(1);
      setListData(initialData);
      setPage(1);
      setHasMore(true);
      setLoading(false);
    }, 500);
  };

  // 加载更多数据
  const handleLoadMore = () => {
    if (loading || !hasMore) return;
    
    setLoading(true);
    setTimeout(() => {
      const nextPage = page + 1;
      const newData = generateMockData(nextPage);
      
      // 模拟数据有限的情况
      if (nextPage > 5) {
        setHasMore(false);
      } else {
        setListData(prev => [...prev, ...newData]);
        setPage(nextPage);
      }
      
      setLoading(false);
    }, 800);
  };

  const handleSearchClick = () => {
    navigate('/search');
  };

  const handleItemClick = (item: ListItem) => {
    navigate(`/detail/${item.id}`);
  };

  return (
    <div className="home-page">
      <Header onSearchClick={handleSearchClick} />
      
      <div className="page-content">
        <Banner />
        <KnowledgeSection />
        <ConsultationSection />
        
        {/* 文章列表区域 */}
        <div className="articles-section">
          <h2 className="section-title">健康资讯</h2>
          <VirtualList
            data={listData}
            loading={loading}
            hasMore={hasMore}
            onLoadMore={handleLoadMore}
            onItemClick={handleItemClick}
            itemHeight={80}
            containerHeight={400}
          />
        </div>
        
        {/* 底部留白，避免内容被标签栏遮挡 */}
        <div className="bottom-spacer" />
      </div>
    </div>
  );
};

export default HomePage;
